<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <!--commonstyle-->
    <link th:include="resident/navMenu::navigation">
    <title>多余物资发布</title>
</head>

<body>
<!--wrapper-->
<div class="wrapper">
    <!--sidebar wrapper -->
    <div th:replace="resident/navMenu::#sideBar"></div>
    <!--end sidebar wrapper -->
    <!--start header -->
    <header th:replace="resident/navMenu::#navBar"></header>
    <!--end header -->
    <!--start page wrapper -->
    <div class="page-wrapper">
        <div class="page-content">
            <!--breadcrumb-->
            <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
                <div class="breadcrumb-title pe-3">多余物资发布</div>
            </div>
            <!--end breadcrumb-->
        </div>
        <div class="card " >
            <div class="card-body">
                <div class="layui-upload">
                    <form class="layui-form" th:action="@{/extraSupply}" method="post" enctype="multipart/form-data">
                        <div class="layui-form-item">
                            <label class="layui-form-label">您的用户id</label>
                            <div class="layui-input-block">
                                <input type="text" name="userid" id="userid" lay-verify="title" autocomplete="off" placeholder="请输入用户id" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">发布物资名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="substance" id="substance" lay-verify="title" placeholder="请输入物品名称" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">物品简介</label>
                            <div class="layui-input-block">
                                <textarea placeholder="可以无" class="layui-textarea" name="desc" id="desc"></textarea>
                            </div>
                        </div>
                        <button type="button" class="layui-btn" id="test1">上传图片</button>
                        <div class="layui-upload layui-input-block">

                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="demo1">
                                <p id="demoText"></p>
                            </div>
                            <div style="width: 200px;">
                                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                    <div class="layui-progress-bar" lay-percent=""></div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="layui-form-item" style="text-align: center;margin-right: 110px" >
                            <div class="layui-input-block ">
                                <button type="submit" class="layui-btn" id="submit" name="submit" >立即提交</button>
                            </div>
                        </div>
                        <a name="list-progress"> </a>
                        <div style="margin-top: 10px;"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--end page wrapper -->
</div>
<!--end wrapper-->
<div th:include="resident/navMenu::#footerBar"></div>
<script th:inline="javascript">
    layui.use(['upload', 'element', 'layer'], function() {
        var ctxPath=[[@{/}]];
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: 'https://httpbin.org/post'
            , auto: false   //是否自动上传
            , accept: 'images'   //指定允许上传的文件类型
            , bindAction: '#submit'//指向一个按钮触发上传
            , data: { userid:$('#userid').val(),substance:$('#substance').val(),desc:$('#desc').val()
            }
            , choose: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('加载中', {icon: 16, time: 0});
                element.progress('demo', 100 + '%'); //可配合 layui 进度条元素使用
                layer.msg('上传完毕', {icon: 1});

            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    })
</script>
</body>

</html>